<template>
  <div class="explore-mode-banner">
    <div class="explore-actions">
      <button class="explore-btn" @click="changeWriter" :disabled="isLoading">
        {{ isLoading ? '获取中...' : '换一位作家' }}
      </button>
      <button class="explore-btn" @click="keepWriter">固定此作家</button>
    </div>
    
    <div class="explore-tag">
      <span class="tag-text">探索模式</span>
      <span v-if="writerName" class="writer-name">{{ writerName }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RandomModeBar',
  props: {
    writerName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isLoading: false
    }
  },
  computed: {
    currentPageType() {
      const path = this.$route.path;
      if (path.startsWith('/works')) return 'works';
      if (path.startsWith('/quotes')) return 'quotes';
      if (path.startsWith('/experience')) return 'experience';
      return 'experience'; // 默认
    }
  },
  methods: {
    async changeWriter() {
      if (this.isLoading) return; // 防止重复点击
      
      this.isLoading = true;
      try {
        // 直接获取随机作家
        const response = await this.$axios.get('/api/writers/random');
        const randomId = response.data.id;
        
        // 根据当前页面类型跳转到对应的探索模式页面
        switch (this.currentPageType) {
          case 'works':
            this.$router.push(`/works/${randomId}?mode=random`);
            break;
          case 'quotes':
            this.$router.push(`/quotes/${randomId}?mode=random`);
            break;
          case 'experience':
          default:
            this.$router.push(`/experience/${randomId}?mode=random`);
            break;
        }
      } catch (error) {
        console.error('获取随机作家失败：', error);
        // 显示错误提示
        alert('获取随机作家失败，请稍后重试');
        // 如果获取失败，跳转到对应的默认页面
        switch (this.currentPageType) {
          case 'works':
            this.$router.push('/works');
            break;
          case 'quotes':
            this.$router.push('/quotes/1');
            break;
          case 'experience':
          default:
            this.$router.push('/home');
            break;
        }
      } finally {
        this.isLoading = false;
      }
    },
    keepWriter() {
      const path = this.$route.path;
      this.$router.push(path);
    }
  }
}
</script>

<style scoped>
.explore-mode-banner {
  padding: 15px 0;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  border-bottom: 1px solid #eee;
  background: rgba(255, 255, 255, 0.9);
}

.explore-tag {
  display: inline-flex;
  align-items: center;
  margin: 0 20px;
}

.explore-tag .tag-text {
  background-color: #166d80;
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.9em;
  font-weight: bold;
}

.explore-tag .writer-name {
  margin-left: 10px;
  color: #166d80;
  font-size: 1em;
  font-weight: bold;
}

.explore-actions {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.explore-actions > * {
  pointer-events: auto;
}

.explore-btn {
  background: none;
  border: 1px solid #166d80;
  color: #166d80;
  padding: 4px 15px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.9em;
}

.explore-btn:hover {
  background-color: #166d80;
  color: white;
}

.explore-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.explore-btn:disabled:hover {
  background: none;
  color: #166d80;
}
</style> 